<template>
  <div style="border: 1px solid #ccc">
    <el-input v-model="title" placeholder="请输入标题"></el-input>
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :default-config="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
  <el-button @click="submitNew()">提交</el-button>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import request from "@/util/request.js";
import aes from "@/util/aes.js";
import attachmentModule from '@wangeditor/plugin-upload-attachment'
import {Boot} from '@wangeditor/editor'

Boot.registerModule(attachmentModule)
export default {
  components: { Editor, Toolbar },
  setup() {
    const title = ref('')
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    const editorConfig = {                       // JS 语法
      MENU_CONF: {},
      placeholder: '请输入内容...'
    }

    // 这里虽然用到了post请求，但是前端没进行加密。所以后端也没必要解密，，只要将后端返回的数据进行解密即可
    editorConfig.MENU_CONF['uploadImage'] = {
      server: '/api/related_news/uploadSign',
      fieldName: "file",
      headers: {
        "account" : JSON.parse(localStorage.getItem('user')).accountNo,
        "token" : JSON.parse(localStorage.getItem('user')).token
      },
      customInsert(res, insertFn) {
        res = aes.decrypt(res)
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(res.data)
      },
      // uploadAttachment: {
      //   server:"/api/RelatedFile/uploadSign"
      // }
    }
    editorConfig.MENU_CONF['uploadVideo'] = {
      server: '/api/related_news/uploadSign',
      fieldName: "file",
      headers: {
        "account" : JSON.parse(localStorage.getItem('user')).accountNo,
        "token" : JSON.parse(localStorage.getItem('user')).token
      },
      customInsert(res, insertFn) {
        res = aes.decrypt(res)
        // JS 语法
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(res.data)
      },
    }

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
     function submitNew() {
      let news= {}
       news.title=title.value
       news.content=valueHtml.value
       news.editor = JSON.parse(localStorage.getItem('user')).accountNo
       request.post("/related_news/edit",news).then(res=>{
       })
    }

    const toolbarConfig = {}
    toolbarConfig.insertKeys = {
      index: 5, // 插入的位置，基于当前的 toolbarKeys
      keys: ['menu-key1', 'menu-key2']
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      editorConfig,
      toolbarConfig,
      handleCreated,
      submitNew,
      title
    };
  }
}
</script>
